import MyIcon from '@/components/MyIcon';
import {
  downloadTemplate,
  getColorTextLoadMap,
  getFileNameNotType,
  splitFileUrl,
} from '@/utils';
import { Col, message, Row, Timeline, Tooltip } from 'antd';
import { Fragment, useContext, useMemo } from 'react';
import { WorkflowCheckRecordContext } from '../common';

export const WorkflowHandledListView: React.FC<IWorkflowChedkRecordAPI.IWorkflowHandledListView> = ({
  taskNodeInfo, //结束流程节点
}) => {
  const { prefixCls, allOpenNodeBody, requestController } = useContext(
    WorkflowCheckRecordContext,
  );

  const resultInfoObj = getColorTextLoadMap(taskNodeInfo?.resultInfo);
  /**
   * 处理附件
   */
  const handleFileList = useMemo(() => {
    if (taskNodeInfo?.attachUrl) {
      let attachList: any[] = [];
      attachList = splitFileUrl(taskNodeInfo?.attachUrl);
      return attachList;
    } else {
      return false;
    }
  }, [taskNodeInfo?.attachUrl]);

  return (
    <Timeline.Item
      key={`${taskNodeInfo?.id}`}
      dot={
        taskNodeInfo?.endTime && (
          <MyIcon
            type="icon-time-circle"
            style={{
              fontSize: '18px',
            }}
          />
        )
      }
      color={taskNodeInfo?.endTime ? 'blue' : 'red'}
    >
      <div className={prefixCls + 'taskNodesTitleBox'}>
        <span className={prefixCls + 'taskNodesTitleBox-nodesUserBox'}>
          【{taskNodeInfo.assigneePositionName || '--'}】
          {taskNodeInfo.assigneeName || '--'}
          {taskNodeInfo?.taskIsSign == 1 && (
            <>【{taskNodeInfo?.taskName || '--'}】</>
          )}
        </span>
        {taskNodeInfo?.endTime && taskNodeInfo?.resultInfo ? (
          <>
            于
            <span className={prefixCls + 'taskNodesTitleBox-nodesUserTimeBox'}>
              {taskNodeInfo?.endTime}
            </span>
            <span
              className={prefixCls + 'taskNodesTitleBox-nodesTaskResult'}
              style={{
                color: resultInfoObj?.color,
              }}
            >
              {resultInfoObj?.colorText}
            </span>
          </>
        ) : (
          <span
            className={prefixCls + 'taskNodesTitleBox-nodesTaskResult'}
            style={{
              color: '#faad14',
            }}
          >
            未处理
          </span>
        )}
      </div>
      {allOpenNodeBody && taskNodeInfo?.endTime && (
        <Row gutter={[0, 4]} className={prefixCls + 'taskNodesBodyCard'}>
          <Col span={8}>
            <div className={prefixCls + 'taskNodesBodyCard-labelText'}>
              开始时间：
            </div>
            <div className={prefixCls + 'taskNodesBodyCard-valueText'}>
              {taskNodeInfo?.startTime || '--'}
            </div>
          </Col>
          <Col span={16}>
            <div className={prefixCls + 'taskNodesBodyCard-labelText'}>
              处理时长：
            </div>
            <div className={prefixCls + 'taskNodesBodyCard-valueText'}>
              {taskNodeInfo?.durationFormat || '--'}
            </div>
          </Col>
          <Col span={8}>
            <div className={prefixCls + 'taskNodesBodyCard-labelText'}>
              任务名称：
            </div>
            <div className={prefixCls + 'taskNodesBodyCard-valueText'}>
              {taskNodeInfo?.taskName || '--'}
            </div>
          </Col>
          <Col span={16}>
            <div className={prefixCls + 'taskNodesBodyCard-labelText'}>
              处理结果：
            </div>
            <div
              className={prefixCls + 'taskNodesBodyCard-valueText'}
              style={{
                color: resultInfoObj?.color,
              }}
            >
              {resultInfoObj?.colorText || '--'}
            </div>
          </Col>
          <Col span={24}>
            <div className={prefixCls + 'taskNodesBodyCard-labelText'}>
              审核意见：
            </div>
            <div className={prefixCls + 'taskNodesBodyCard-valueText'}>
              {taskNodeInfo?.comment || '--'}
            </div>
          </Col>

          {handleFileList && (
            <>
              <Col span={24}>
                <div className={prefixCls + 'taskNodesBodyCard-labelText'}>
                  审批附件：
                </div>
                <div className={prefixCls + 'taskNodesBodyCard-valueText'}>
                  {handleFileList?.map((itemFile: any) => {
                    return (
                      <Fragment key={`${itemFile.attachUrl}${Math.random()}`}>
                        <Tooltip title={itemFile.attachName}>
                          <a
                            onClick={() => {
                              message.success('下载中，请稍后...');
                              downloadTemplate(
                                `/${requestController}/downloadFile`,
                                itemFile.attachName,
                                itemFile.attachUrl,
                                () => {},
                              );
                            }}
                          >
                            {getFileNameNotType(itemFile.attachName, 10)}
                          </a>
                        </Tooltip>
                      </Fragment>
                    );
                  })}
                </div>
              </Col>
              <Col span={24}>
                <div className={prefixCls + 'taskNodesBodyCard-labelText'}>
                  附件描述：
                </div>
                <div className={prefixCls + 'taskNodesBodyCard-valueText'}>
                  {taskNodeInfo?.attachDescribe || '--'}
                </div>
              </Col>
            </>
          )}
        </Row>
      )}
    </Timeline.Item>
  );
};
